<template>
  <views class="logistics_list">
    <viewTitle :title="'托运单列表'"></viewTitle>
    <div class="search">
      <el-form ref="form" label-width="auto" :inline="true">
        <el-form-item label="物流企业:">
          <el-input type="text" clearable placeholder="请输入物流企业" v-model="logistics_enterprise"></el-input>
        </el-form-item>
        <el-form-item label="企业类型:">
          <el-select v-model="company_type" clearable placeholder="请选择">
            <el-option
                v-for="item in company_type_list"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="到达站点:">
          <el-cascader
              v-model="station"
              :options="regionList"
              :props="{ checkStrictly: true }"
              @change="handleChange"></el-cascader>
        </el-form-item>


        <el-form-item label="寄件人:">
          <el-input type="text" clearable placeholder="请输入寄件人" v-model="sender"></el-input>
        </el-form-item>
        <el-form-item label="寄件人联系方式:">
          <el-input type="text" clearable placeholder="请输入寄件人联系方式" v-model="sender_phone"></el-input>
        </el-form-item>


        <el-form-item label="收件人:">
          <el-input type="text" clearable placeholder="请输入收件人" v-model="recipients"></el-input>
        </el-form-item>
        <el-form-item label="收件人联系方式:">
          <el-input type="text" clearable placeholder="请输入收件人联系方式" v-model="recipients_phone"></el-input>
        </el-form-item>
        <el-form-item label="寄件时间:">
          <el-date-picker
              v-model="registration_date"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"

          ></el-date-picker>
        </el-form-item>
        <el-form-item label="揽件员:">
          <el-input type="text" clearable placeholder="请输入揽件员" v-model="employee_name"></el-input>
        </el-form-item>
        <el-form-item label="寄件类型:">
          <el-select v-model="isprotocol" placeholder="客户类型">
            <el-option
                v-for="item in customer_type_list"
                :key="item.type"
                :label="item.name"
                :value="item.type"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="托运单号编号:">
          <el-input type="text" clearable placeholder="请输入托运单号编号" v-model="logistics_id"></el-input>
        </el-form-item>
      </el-form>

      <div class="btn-area">
        <el-button type="primary" @click="getData()">查询</el-button>
        <el-button @click="reset">重置</el-button>
        <el-button type="warning" @click="export_excel()">导出列表</el-button>
        <div class="total">共（{{type_count[0]}}<span>(普通客户)</span>+{{type_count[1]}}<span>(协议客户)</span>）件</div>
      </div>
    </div>
    <div class="table_list">
      <el-table :data="tableList" style="width: 100%" border :header-cell-style="getRowClass">
        <el-table-column type="index" label="序号" width="100"></el-table-column>
        <el-table-column prop="logistics_id" label="托运单号编号" width="200"></el-table-column>
        <el-table-column prop="logistics_no" label="托运单号" width="200"></el-table-column>
        <el-table-column prop="company_name" label="承运物流企业" width="200"></el-table-column>
        <el-table-column :formatter="(row)=>{return row.company_type == 1 ? '快递':'物流'}" label="企业类型"
                         width="120"></el-table-column>
        <el-table-column prop="arrive_region_name" label="送达站点" width="300"></el-table-column>
        <el-table-column prop="post_communicate_name" label="寄件人" width="180"></el-table-column>
        <el-table-column prop="employee_name" label="揽件员" width="150"></el-table-column>
        <el-table-column prop="post_communicate_mobile" label="寄件人联系方式" width="180"></el-table-column>
        <el-table-column prop="receive_communicate_name" label="收件人" width="150"></el-table-column>
        <el-table-column prop="receive_communicate_mobile" label="收件人联系方式" width="180"></el-table-column>
        <el-table-column :formatter="(row)=>{return row.is_dubious == 1 ? '可疑件':'正常件'}" label="是否可疑"
                         width="200"></el-table-column>
        <el-table-column :formatter="(row)=>{return row.customer_id>0 ? '协议客户':'普通客户'}" label="客户类型"
                         width="200"></el-table-column>
        <el-table-column prop="num" label="数量" width="200"></el-table-column>
        <el-table-column prop="create_time" label="创建时间" width="200"></el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button v-if="$route.query.check.q" type="success" @click="toDetail(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex flexR paging">
        <el-pagination
            style="background:#fff; padding:10px 0"
            background
            layout="prev, pager, next,sizes,total, jumper"
            @size-change="(page_size) => {this.pagination.page_size = page_size;this.getData()}"
            @current-change="(page_start) => {this.pagination.page_start = page_start;this.getData()}"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pagination.page_size"
            :total="pagination.total_count"
            :current-page="pagination.current_page"
            :page-count="pagination.page_count"
        ></el-pagination>
      </div>
    </div>
  </views>
</template>


<script>
	export default {
		data() {
			return {
				station: "", // 站点
				logistics_enterprise: "", // 物流企业
				sender: "", // 寄件人
				sender_phone: "", // 寄件人联系方式
				recipients: "", // 收件人
				recipients_phone: "", // 收件人联系方式
				employee_name: "",
				tableList: [],
				pagination: {
					page_start: 0, //搜索开始页码
					current_page: 0, //当前页码
					page_count: 0, //总页数
					page_size: 10, //每页数量
					total_count: 0 //总数量
				},
				regionList: [],
				company_type: null,
				company_type_list: [
					{value: null, label: '全部'},
					{value: 0, label: '物流'},
					{value: 1, label: '快递'}
				],
				registration_date: [],
				isprotocol: '',
				customer_type_list: [
					{value: '', name: '全部'},
					{type: 0, name: '普通客户'},
					{type: 1, name: '协议客户'}
				],
				type_count: [],
				download_url: '',
				logistics_id: ''
			};
		},
		methods: {
			//    修改第一行样式
			getRowClass({row, column, rowIndex, columnIndex}) {
				if (rowIndex === 0) {
					return "background: #FAFAFA ";
				} else {
					return "";
				}
			},
			//    修改是否换行
			changeStyleRow(width) {
				let _width = width - 290 - 350 - 300 - 50 - 25;
				if (_width > 300) {
					this.marginLeft = 25;
				} else {
					this.marginLeft = 0;
				}
			},
			// 获取数据
			getData(isTrue) {
				if(!isTrue){
					 this.post_data.search_type = 1
        }
				console.log(isTrue);
				this.$raxios.post(
					this.$mapapi.admin_logisticsList,
					{data: this.post_data}
				).then(res => {
					if (res.code == 200) {
						this.tableList = res.data.list;
						this.pagination = res.data.pagination;
						this.type_count = res.data.type_count;
						this.download_url = res.data.download_url;
					} else {
						this.$message.error(res.msg)
					}
				})
			},
			// 去详情
			toDetail(row) {
				this.$toRoutePath({
					path: "/logistics_list/logistics_list_detail",
					edit: true,
					query: {logistics_id: row.logistics_id}
				});
			},
			// 重置
			reset() {
				this.logistics_enterprise = '';
				this.station = '';
				this.sender = '';
				this.sender_phone = '';
				this.recipients = '';
				this.recipients_phone = '';
				this.registration_date = []; // 注册时间
				this.company_type = null; // 企业类型
				this.isprotocol = null; // 企业类型
				this.logistics_id = ''; // 企业类型
				this.getData();
			},
			handleChange(value) {
				console.log(value);
			},
			export_excel() {
				if (this.download_url) {
					window.open(this.download_url);
				}
			},
		},
		computed: {
			post_data() {
				let post = {};
				post.company_name = this.logistics_enterprise || '';
				post.arrive_region = this.station.slice(-1)[0] || 0;
				post.post_communicate_name = this.sender || '';
				post.post_communicate_mobile = this.sender_phone || '';
				post.receive_communicate_name = this.recipients || '';
				post.receive_communicate_mobile = this.recipients_phone || '';
				post.employee_name = this.employee_name || '';
				post.pagination = this.pagination;
				post.type = this.company_type;
				post.isprotocol = this.isprotocol;
				post.logistics_id = this.logistics_id;
				if (this.registration_date.length > 0) {
					post.create_time_start = this.registration_date[0] / 1000;     //开始时间
					post.create_time_end = this.registration_date[1] / 1000;     //结束时间
				}
				return post;
			}
		},
		mounted() {
			this.getData(true);
		},
		created() {
			this.regionList = JSON.parse(localStorage.getItem('regionList')) || [];
			if (this.regionList.length == 0) {
				let {code, msg, data} = this.$api.sendSync(
					this.$mapapi.admin_getALLRegion
				);
				if (code != 200) {
					this.regionList = [];
					return;
				}
				localStorage.setItem('regionList', JSON.stringify(data));
				this.regionList = data;
			}
		},
	};
</script>

<style lang="less" :scope="true" src="@/style/logistics_manager/logistics_list.less">
</style>
